import { Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import React from 'react';
import '../../styles/MovieRecommend.css';

const MovieRecommendationNav = () => {
  const navigate = useNavigate();

  const handleNowPlayingClick = () => {
    navigate('/recommendation/now-playing');
  };

  const handleUpcomingClick = () => {
    navigate('/recommendation/upcoming');
  };

  const handlePersonalizedClick = () => {
    navigate('/recommendation/personalized');
  };

  return (
    <div className="movie-recommend-nav-container">
      <div className="button-group">
        <Button
          onClick={handleNowPlayingClick}
          className="movie-recommend-nav-button A"
          block
        >
          影院热映
        </Button>
        <Button
          onClick={handleUpcomingClick}
          className="movie-recommend-nav-button B"
        >
          即将上映
        </Button>
        <Button
          onClick={handlePersonalizedClick}
          className="movie-recommend-nav-button C"
        >
          个性推荐
        </Button>
      </div>
    </div>
  );
};

export default MovieRecommendationNav;